<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script>
        document.documentElement.className = 'js';
    </script>
</head>

<body class="demo-1 loading">
    <svg class="hidden">
			<symbol id="icon-arrow-nav" viewBox="208.3 352 4.2 6.4">
				<title>arrow-nav</title>
				<polygon points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"></polygon>
			</symbol>
		</svg>
    <main class="site-wrapper">
        <div class="content">
            <div class="slide-wrapper">
                <div class="slide-item">
                    <img src="./img/20200805.jpg" class="slide-item__image">
                </div>
                <div class="slide-item">
                    <img src="./img/20200612.jpg" class="slide-item__image">
                </div>
            </div>
            <button class="scene-nav scene-nav--prev" data-nav="previous"><svg class="icon icon--arrow-nav-prev"><use xlink:href="#icon-arrow-nav"></use></svg></button>
            <button class="scene-nav scene-nav--next" data-nav="next"><svg class="icon icon--arrow-nav-next"><use xlink:href="#icon-arrow-nav"></use></svg></button>
        </div>
    </main>
    <script src="js/demo.js"></script>
    <script src="js/pixi.min.js"></script>
    <script src="js/TweenMax.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/imagesloaded.pkgd.min.js"></script>
    <script>
        imagesLoaded(document.body, () => document.body.classList.remove('loading'));

        var spriteImages = document.querySelectorAll('.slide-item__image');
        var spriteImagesSrc = [];

        for (var i = 0; i < spriteImages.length; i++) {
            var img = spriteImages[i];
            spriteImagesSrc.push(img.getAttribute('src'));
        }

        var initCanvasSlideshow = new CanvasSlideshow({
            sprites: spriteImagesSrc,
            displacementImage: 'img/dmaps/2048x2048/clouds.jpg',
            autoPlay: false,
            autoPlaySpeed: [10, 2],
            displaceScale: [300, 300],
            // centerSprites: true,

            // wacky: true
            // sprites: spriteImagesSrc,
            // displacementImage: 'img/dmaps/512x512/crystalize.jpg',
            // autoPlay: false,
            // displaceScale: [300, 300],
            // fullScreen: true,
            // wacky: false,
            // centerSprites: true,
        });
        console.log(initCanvasSlideshow)
    </script>
</body>

</html>